{% extends "datapanel/base.html" %}
{% block content %}
{% load static %}
<style>
    .table td {
        font-size: 0.85rem;
        font-family: Helvetica,"Microsoft YaHei","微软雅黑",Arial,sans-serif;    
    }
</style>
{% comment %} load my filters {% endcomment %}
{% load concat_string %}
<div class="d-flex flex-row justify-content-between mb-1">
    <form method='get' >
        {% csrf_token %} 
        <span class='px-2'>类别&nbsp;{{ filter.form.category }}</span>&nbsp;
        <span class='px-2'>价格大于&nbsp;{{ filter.form.pricegte }}</span>&nbsp;
        <span class='px-2'>月销量大于&nbsp;{{ filter.form.boughtgte }}</span>&nbsp;
        <span class='px-2'>综合查询&nbsp; {{ filter.form.anyword }}</span>
        <button type='submit' class='btn btn-primary'>搜索</button>
    </form>
    <!--保存内容至csv文件-->
    <div class="pr-3">
    <a href="{% url 'datapanel:tocsv' %}" id="btn-tocsv" class="btn btn-info">保存至文件</a> 
    </div>
</div>

<table class="table table-bordered border-2">
    <thead>
        <tr>
            <th>id</th>
            <th>商品名称</th>
            <th>类别</th>
            <th>价格</th>
            <th>图片</th>
            <th>卖家</th>
            <th>评价数</th>
            <th>近1月销量</th>
            <th>接口</th>
            <th>采集时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for item in page_obj %}
        <tr>
            <td>{{ item.id }}</td>
            <td>{{ item.name |truncatechars:"40" }}</td>
            <td>{{ item.short_name  }}</td>
            <td>{{ item.price|concat_string:item.currency }}</td>
            <td><img class="img-product" src="{% static item.image_path %}" alt="{{ item.short_name }}" width="100" height="100"></td>
            <td>{{ item.seller }}</td>
            <td>{{ item.reviews }}</td>
            <td>{{ item.bought_last_month }}</td>
            <td>{{ item.conn_tech }}</td>
            <td>{{ item.create_time | date:"m-d H:i:s" }}</td>
            <td><a class='btn-success btn-sm' href="{{ item.get_absolute_url }}" target="_blank">详细</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% if is_paginated %}
    <div class="pagination">
        <span class="step-links">
            {% if page_obj.has_previous %}
                <a href="?page=1">&laquo; 首页</a>
                <a href="?page={{ page_obj.previous_page_number }}">上一页</a>
            {% endif %}
            <span class="current">
                &nbsp;当前页 {{ page_obj.number }}/{{ page_obj.paginator.num_pages }} &nbsp;
            </span>
            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}">下一页</a>
                <a href="?page={{ page_obj.paginator.num_pages }}">末页 &raquo;</a>
            {% endif %}
        </span>
    </div>
{% endif %}
<script> 
    var btn_tocsv = document.getElementById('btn-tocsv');
    btn_tocsv.addEventListener("click", function(){
        alert('已通过浏览器下载文件，文件名为：products.csv，可用excel打开')
    });
</script>
{% endblock content %}
